<template>
  <div class="form-group">
    <label :class="labelClass" :style="finalLabelStype"><span v-if="required" class="required ">*</span>{{ title }}：</label>
    <div :class="rightClass" :style="rightStyle">
        <form-pop :content="error"/>
      <a-select
        style="width:100%;"
        :style="selectStyle"
        :value="value"
        @change="handleChange"
        :id="id"
        :name="name"
        :mode="mode"
        :size="size"
      >
        <a-select-opt-group
          v-for="(item) in data"
          :key="item.key"
        >
          <span slot="label">
            <a-icon type="user" /> {{ item.groupTitle}}
          </span>
          <a-select-option
            v-for="(opt) in item.data"
            :key="opt.key"
            :value="opt.key"
          >
            {{ opt.title }}
          </a-select-option>
        </a-select-opt-group>
      </a-select>
      <slot name="actions" class="action"></slot>
    </div>
  </div>
</template>

<script>
import formAttr from "@/mixins/form/form-attr";

const defaultLabelStype =
  "font-weight: normal;justify-content: flex-end;padding-left: 5px;text-align: right;width:110px;";
export default {
  name: "FormSelect",
  mixins: [formAttr],
  props: {
    selectStyle: {
      type: String,
      default: ""
    },
    dataList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: "default"
    },
    size: {
      type: String,
      default: "default"
    },
    isAddDefaultVal: {
      type: Boolean,
      default: true
    },
    prekey: {
       type: String,
       default: ""
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    //console.log(this.prekey);
  },
  computed: {
    finalLabelStype: function() {
      return this.labelStyle || defaultLabelStype;
    },
    data: function() {
      if (this.isAddDefaultVal) {
        return [{ key: "", title: "请选择" }, ...this.dataList];
      } else {
        return this.dataList;
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit("input", value);
      //自定义 change事件
      this.$emit("change", value);
      //todo
      console.log(`selected ${value}`);
    }
  }
};
</script>
